<template>
  <div class="policy-detail">
    <el-tabs v-model="activeTab" @tab-click="tabClick">
      <el-tab-pane label="政策简介" name="info">
        <slot name="detail"></slot>
      </el-tab-pane>
      <el-tab-pane label="资讯汇总" name="second">
        <el-form :model="newsForm" class="filter-box">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item label="名称">
                <el-input @keyup.enter="queryNews" v-model="newsForm.title" placeholder="资讯名称" clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="文号">
                <el-input
                @keyup.enter="queryNews"
                  v-model="newsForm.proof"
                  placeholder="文号名称"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="批次">
                <el-select
                  class="w-full"
                  v-model="newsForm.batchs"
                  multiple
                  collapse-tags
                  collapse-tags-tooltip
                  placeholder="选择批次"
                  @change="queryNews"
                  clearable
                >
                  <el-option
                    v-for="item in batchs"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="性质">
                <el-select
                  class="w-full"
                  v-model="newsForm.characters"
                  multiple
                  collapse-tags
                  collapse-tags-tooltip
                  placeholder="选择资讯性质"
                  @change="queryNews"
                  clearable
                >
                  <el-option
                    v-for="item in characters"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="padding: 0;">
              <el-form-item style="padding: 0;" label="成文日">
                <el-date-picker
                  v-model="newsForm.startTime"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  type="date"
                  placeholder="开始"
                  @change="queryNews"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="3" >
              <el-form-item label="-">
                <el-date-picker
                  v-model="newsForm.endTime"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  type="date"
                  placeholder="结束"
                  @change="queryNews"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-button type="primary" plain @click="queryNews"
                >查询</el-button
              >
              <el-button type="info"  :class="clear?'clear':'noClear'" @click="resetNewsForm"
                >重置</el-button
              >
            </el-col>
          </el-row>
        </el-form>
        <el-table
          class="el-table"
          stripe
          v-loading="newsLoading"
          element-loading-text="正在拼命加载中..."
          :row-class-name="tableRowClassName"
          :data="topNews"
          :default-sort="{ prop: 'date', order: 'descending' }"
          :header-cell-style="{ background: '#2186F0', color: '#fff', textAlign: 'center' }"
          style="width: 100%"
          :height="topNews?.length>0?'100%':'100'"
        >
          <el-table-column
            type="index"
            label="序号"
            width="90"
            align="center"
          />
          <el-table-column label="资讯名称" align="center" show-overflow-tooltip>
            <template #default="props">
              <el-link
                type="primary"
                :underline="false"
                :href="`${currHost}/detail?id=${props.row.id}&searchType=1`"
                target="_blank"
              >
              <span style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;" v-html="hightLight(newsFormTitle,props.row.title)"></span>
                <!-- <el-tag class="ml-2" v-if="props.row.proof">
                  {{ props.row.proof }}
                </el-tag> -->
              </el-link>
            </template>
          </el-table-column>
          <el-table-column label="文号" width="230" align="center" show-overflow-tooltip>
            <template #default="props">
              <el-tag class="ml-2" v-if="props.row.proof">
                <!-- {{ props.row.proof }} -->
                <span v-html="hightLight(proof,props.row.proof)"></span>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="批次" width="90" prop="year" align="center" />
          <el-table-column label="性质" width="90" prop="character" align="center"/>
          <el-table-column label="成文日期" width="150" prop="completeTimeStr" align="center"/>
        </el-table>
        <el-pagination
        style="margin-top: 10px;"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[100, 200, 300, 400]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="topNewsTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
      </el-tab-pane>
      <el-tab-pane label="关系图谱" name="atlas">
        <div class="relative">
          <div class="atlas-list">
            <!-- “地方管理、地方切块”仅显示“关联图谱、管理图谱”；“地方推荐”仅显示“管理图谱” -->
            <template v-for="(item, index) in atlasList" :key="item.type">
              <div class="atlas-item"
              v-if="((detailInfo.itemType=='6'||detailInfo.itemType=='7')&&(item.type=='2'||item.type=='3'))||(detailInfo.itemType=='5'&&item.type=='3')||
              (detailInfo.itemType=='1'||detailInfo.itemType=='2'||detailInfo.itemType=='3'||detailInfo.itemType=='4')&&(item.type=='1'||item.type=='2'||item.type=='3'||item.type=='4')"
                @click="openNewPage('relationImg', item.type,'2')"
              >
                  <img
                  v-if="item.type != 2"
                  src="../../../../assets/image/atlas1.jpg"
                  />
                  <img
                    v-else-if="item.type == 2"
                    src="../../../../assets/image/atlas2.jpg"
                  />
                  <p>{{ item.label }}</p>
              </div>
            </template>
          </div>
          <div class="shade" v-if="!token && !userInfo.userName">
            <!-- <h3>登录会员账号 查看更多维度</h3> -->
            <el-button type="primary" plain @click="zlDialog">
              请登录后再进行查看
            </el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="立项查询" v-if="detailInfo.itemType=='1'||detailInfo.itemType=='2'||detailInfo.itemType=='3'||detailInfo.itemType=='4'||detailInfo.itemType=='6'||detailInfo.itemType=='7'" name="analysis2">
        <projectDrawer :data="projectData" :queryProject="queryProject" :projectDataTotal="projectDataTotal" @queryProjectList="(params)=>queryProject(params)" ref="drawer" />
        <!-- <div class="data-pie-list">
          <div
            class="pie-item"
            v-for="(item, index) in dataPieList"
            :key="item.type"
            @click="openNewPage('analysis', item.type)"
          >
            <img
              v-if="index == 0"
              src="../../../../assets/image/mini-pie.jpg"
            />
            <img
              v-else-if="index == 1"
              src="../../../../assets/image/mini-pie2.jpg"
            />
            <img
              v-else-if="index == 2"
              src="../../../../assets/image/mini-pie3.jpg"
            />
            <img
              v-else-if="index == 3"
              src="../../../../assets/image/mini-pie4.jpg"
            />
            <p>{{ item.label }}</p>
          </div>
        </div>
        <div class="query-project">
          <el-button type="primary" @click="queryProject(drawer)">
            立项查询
          </el-button>
        </div>
        <div class="shade" v-if="!token && !userInfo.userName">
          <el-button type="primary" plain @click="zlDialog">
            请登录后再进行查看
          </el-button>
        </div>
        <div
          class="shade"
          v-if="token && userInfo.userName && userInfo.vip == 0"
        >
          <el-button
            type="warning"
            plain
            @click="router.push({ path: 'vipCenter' })"
          >
            成为会员查看数据分析
          </el-button>
        </div> -->
      </el-tab-pane>
      <el-tab-pane label="数据分析" name="analysis">
        <div class="data-pie-list">
          <div
            class="pie-item"
            v-for="(item, index) in dataPieList"
            :key="item.type"
            @click="openNewPage('analysis', item.type)"
          >
            <img
              v-if="index == 0"
              src="../../../../assets/image/mini-pie.jpg"
            />
            <img
              v-else-if="index == 1"
              src="../../../../assets/image/mini-pie2.jpg"
            />
            <img
              v-else-if="index == 2"
              src="../../../../assets/image/mini-pie3.jpg"
            />
            <img
              v-else-if="index == 3"
              src="../../../../assets/image/mini-pie4.jpg"
            />
            <p>{{ item.label }}</p>
          </div>
        </div>
        <div class="query-project">
          <!-- <el-button type="primary" @click="openDrawer">
            立项查询
          </el-button> -->
        </div>
        <div class="shade" v-if="!token && !userInfo.userName">
          <el-button type="primary" plain @click="zlDialog">
            请登录后再进行查看
          </el-button>
        </div>
        <!-- 不是会员不能查看数据分析模块 -->
        <div
          class="shade"
          v-if="token && userInfo.userName && userInfo.vip == 0"
        >
          <el-button
            type="warning"
            plain
            @click="router.push({ path: 'vipCenter' })"
          >
            成为会员查看数据分析
          </el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- <el-drawer
      v-model="drawer"
      title="立项详情"
      size="80%"
      direction="rtl"
      :close-on-click-modal="true">
    </el-drawer> -->
    <!-- <projectDrawer
        :data="projectData"
        @queryProjectList="(params:any) => queryProject(drawer,params)"
        ref="drawer"
    /> -->
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref,computed,watch } from "vue";
import { useRouter } from "vue-router";
import { usePolicyHook } from "./hook";
import projectDrawer from "../projectDrawer/index.vue";
import { zlDialog } from "../../../../utils/zlDialog";
import { useDetailHooks } from '../../hooks'
import { hightLight  } from '@/utils/index'
const contentList = computed(() => topNews.map((result) => hightLight(result)));
const router = useRouter();
const { detailInfo }  = useDetailHooks()
const props = defineProps(["info"]);

const drawer = ref(false);


const {
  activeTab,
  topNews,
  batchNews,
  newsForm,
  characters,
  batchs,
  checkTag,
  queryNews,
  resetNewsForm,
  newsLoading,
  currHost,
  dataPieList,
  openNewPage,
  atlasList,
  queryProject,
  projectData,
  projectDataTotal,
  userInfo,
  token,
  tabClick,
  newsFormTitle,proof,loading,
  completeTime,
  handleSizeChange,
    handleCurrentChange,
    pageSize,
    currentPage,
    topNewsTotal

} = usePolicyHook(props.info);

const tableRowClassName = ({
  row,
  rowIndex
}: {
  row: any;
  rowIndex: number;
}) => {
  if (row.type === 2) {
    return "info-row";
  } else {
    return "";
  }
};
const clear = ref(true)
watch(newsForm,()=>{
  if(newsForm.title!=''||newsForm.characters.length>0||newsForm.batchs.length>0||newsForm.proof!=''||newsForm.startTime||newsForm.endTime){
    clear.value = false
  }else{
    clear.value = true
  }
},{deep:true,immediate:true})
</script>

<style scoped lang="postcss">
.policy-detail {
  .filter-box {
    @apply mb-4 bg-white p-4 px-3 rounded-md pb-0;
    .date-picker,
    .nature-picker {
      @apply flex items-center;
      .filter-label {
        @apply mr-3 font-bold;
      }
    }
    .date-picker {
      @apply mr-8;
      :deep(.el-check-tag) {
        @apply bg-gray-200;
        .is-checke {
          @apply bg-red-400;
        }
      }
      :deep(.el-check-tag.is-checked) {
        @apply bg-theme-color text-white;
      }
    }
    .nature-picker {
      @apply mr-8;
    }
  }

  :deep(.el-table) {
    border-radius: 10px;
    tr{
      background-color:#ecf5ff;
    }
    /* --el-table__row--striped{
      background-color:#ecf5ff;
    } */
    .info-row {
      /* --el-table-tr-bg-color: #ecf5ff; */
      /* td.el-table__cell,th.el-table__cell.is-leaf {
        border-bottom: 1px solid #449EFF !important;
      } */
    }

  }

  .data-pie-list {
    @apply flex flex-wrap;
    .pie-item {
      @apply mr-8 p-2 bg-white cursor-pointer rounded-md;
      transition: 0.4s all;
      &:hover {
        @apply bg-theme-color text-white;
      }
      img {
        width: 170px;
        height: 150px;
      }
      p {
        @apply text-center mt-2 font-bold;
      }
    }
  }
  .atlas-list {
    @apply flex items-center;
    .atlas-item {
      @apply mr-8 p-2 bg-white cursor-pointer rounded-md;
      transition: 0.4s all;
      &:hover {
        @apply bg-theme-color text-white;
      }
      img {
        width: 170px;
        height: 150px;
      }
      p {
        @apply text-center mt-2 font-bold;
      }
    }
  }

  .shade {
    @apply absolute top-0 w-full text-white font-bold flex justify-center items-center rounded-md flex-wrap;
    height: 100%;
    background: #00000075;
  }

  .query-project {
    @apply absolute right-0 top-0;
  }
}
.clear{
  background: #F4F4F5;
  color: #b1b3b8;
}
.noClear{
  background: #b1b3b8;
  color: #FFFF;
}
</style>
